<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试首页</title>
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
</head>
<body>
    <style>
        input{
            font-size: 20px;
        }
        #getSms #validateSms{
            font-size: 18px;
        }
    </style>
    <div id="container" style="text-align: center;">
        <p>测试redis存储短信验证码</p>
        <br>
        <input type="text" v-model="phone" placeholder="输入手机号">
        <button id="getSms" @click="getSms">获取短信验证码</button>
        <br><br>
        <input type="text" v-model="smsCode" placeholder="输入验证码">
        <button id="validateSms" @click="validateSms">校验短信验证码</button>
        {% csrf_token %}
    </div>

    <script>
        // axios.defaults.baseURL = xxx
        axios.defaults.withCredentials = true
        axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'
        axios.defaults.headers['token'] = localStorage.getItem('token') || ''
        // axios.defaults.headers.post['Content-Type'] = 'application/json'
        
        // post请求的配置
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
        Vue.config.productionTip = false
        new Vue({
            data(){
                return {
                    phone: "",
                    smsCode: "",
                }
            },
            methods:{
                getSms(){
                    console.log("获取短信验证码")
                    if(!this.phone){
                        alert("请输入手机号")
                        return
                    }

                    // 数据没发送过去
                    axios.get('/test_sms_code/',{params: {phone: this.phone}},
                    )
                    .then(res => {
                        console.log("响应:", res)
                        if(res.data.code == 200){
                            alert(res.data.msg + res.data.smsCode)
                        }else{
                            alert(res.data.err)
                        }
                    }).catch(err => {
                        return Promise.reject(err)
                    })  
                        
                },

                validateSms(){
                    console.log("验证短信验证码")
                    if(!this.smsCode){
                        alert("请输入短信验证码")
                        return
                    }
                    
                    // 前后端不分离，即普通页面html
                    // post请求无法发送数据, 需要处理数据
                    axios.post("/test_sms_code/",
                        Qs.stringify({
                            phone: this.phone, 
                            smsCode: this.smsCode,
                            csrfmiddlewaretoken: $("input:last").val()
                        })).then(res => {
                        console.log("校验的响应:", res)
                        if(res.data.code==200){
                            alert(res.data.msg)
                        }else{
                            alert(res.data.err)
                        }
                    }).catch(err => {
                        return Promise.reject(err)
                    })
                        
                },
            },
        }).$mount("#container")
        // $(function(){
        //     $("#getSms").click(getSms)
        //     $("#validateSms").click(validateSms)
        // })

        // function getSms(){
        //     console.log("获取短信验证码")
        //     if(!$("input:first").val()){
        //         alert("请输入手机号")
        //         return
        //     }
        //     $.ajax({
        //         url:'/test_sms_code/',
        //         data:{phone: $("input:first").val()},
        //         type:'get',
        //         dataType:'json',
        //         success:function(res){
        //             console.log("响应:", res)
        //             if(res.code == 200){
        //                 alert(res.msg + res.smsCode)
        //             }else{
        //                 alert(res.err)
        //             }
        //         },
        //         error:function(err){
        //             console.log("xxxx", err)
        //         },
        //     })
        // }

        // function validateSms(){
        //     console.log("验证短信验证码")
        //     if(!$("input:last").val()){
        //         alert("请输入短信验证码")
        //         return
        //     }
            
        //     $.ajax({
        //         url:"/test_sms_code/",
        //         type:'post',
        //         data:{phone: $("input:first").val(), smsCode: $("input:odd").val(),
        //             csrfmiddlewaretoken:$("input:last").val()},
        //         dataType:"json",
        //         success:function(res){
        //             console.log("校验的响应:", res)
        //             if(res.code==200){
        //                 alert(res.msg)
        //             }else{
        //                 alert(res.err)
        //             }
        //         },

        //     })
        // }
    </script>
    

</body>
</html>